<template>
    <div>
        <common-header></common-header>
        <!-- 功能 -->
        <common-title></common-title>
        <div class="list">
            <div class="list-title">投票查看</div>
            <div class="list-item-wrapper" v-for="(item, index) of list" :key="index"
            @click="getResultInfo(item)">
                <div class="list-item" v-if="times">
                    第{{times}}次投票结果预览
                </div>
                <div class="list-item" v-else>
                    您目前还没有投票
                </div>
            </div>
        </div>
        <div class="table-desc">
            <div>显示第1到第{{this.totalList.length}}记录，总共{{this.totalList.length}}条记录</div>
            <!-- <div>计票人： {{teller}}  监票人：{{scrutineer}} </div> -->
        </div>
        <!-- 投票结果 -->
        <home-list :listTitle="titletList" :listData="totalList" @newVote="handleNewVote" :vcid="vcid" :appear="judge"></home-list>
    </div>
</template>
<script>
import vue from 'Vue'
import axios from 'axios'
import { mapState, mapActions } from 'Vuex'
import CommonHeader from 'common/components/header'
import CommonTitle from 'common/components/title'
import HomeList from './components/list'
var count = 1
export default {
  name: 'home',
  components: { CommonHeader, CommonTitle, HomeList },
  methods: {
    // handleVoteClick (key) {
    //   swal('key')
    // },
    ...mapActions(['changeVstatus']),
    getResultInfo () {
      axios.post('http://192.168.43.188:8081/getResults', {
        'mid': this.userId
      }).then(({status, data}) => {
        if (status === 200) {
           // console.log(data)
          if (data.msg === '111') {
            swal('获取投票结果成功', '', 'success')
            this.totalList = data.info
            this.vcid = data.vcid
            if (data.mode === '11') {
              this.judge = false
            }
            if (this.vcid) {
              this.bool = true
            }
            const arr = this.vcid.split('_')
            this.times = arr[arr.length - 1]
          } else {
            swal(data.msg, '', 'error')
          }
        } else {
          swal('服务器出错', '', 'error')
        }
      }).catch((error) => {
        swal('info' + error, '', 'error')
      })
    },
    handleNewVote () {
      vue.set(this.list, this.list.length, count++)
    },
    back () {
      if (!this.userPassword) {
        swal("请重新登录", '', 'warning')
        this.$router.push('/')
      }
    }
  },
  computed: {
    ...mapState(['userPassword']),
    ...mapState(['userId']),
    titletList () {
      // const titleList = Object.keys(this.totalList[0])
      // const obj = JSON.parse(JSON.stringify(this.totalList[0]))
      // console.log(this.totalList[0])
      const titleList = []
      for (let a in this.totalList[0]) {
        titleList.push(a)
      }
      // console.log(titleList)
      return titleList
    }
  },
  data () {
    return {
      scrutineer: '', // 监票人
      teller: '', // 计票人
      list: [],
      totalList: [],
      vcid: '',
      times: '',
      bool: false,
      judge: true
    }
  },
  async mounted () {
    this.back()
    await this.getResultInfo()
    this.handleNewVote()
  },
  updated () {
    // console.log(this.bool)
    this.changeVstatus(this.bool)
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.title
    width: 100%
    line-height: 1.5rem
    text-align: center
    font-weight: 700
    font-size: .36rem
.list
    padding: 0 .5rem
    overflow: hidden
    .list-title
        text-align: center
        background: $bgcolor
        line-height:.6rem
        color: white
    .list-item-wrapper
        width: 25%
        float: left
    .list-item
        color: #555
        line-height: .4rem
        font-size: .34rem
        border: .02rem solid #666
        padding: .1rem .1rem
        border-radius: .1rem
        margin: .2rem .4rem
        text-align: center
    .table-item
        width: 10%
        border: .02rem solid #ccc
        text-align: center
        padding: .2rem 0
        line-height: .4rem
.table-desc
    // border-top: .02rem dashed #666
    line-height: .6rem
    text-align: center
    background: #eee
    margin-bottom: -.4rem
</style>
